<!DOCTYPE html>
<html>
  <head> 
    <meta charset="utf-8">
    <title>Dijit CheckBox Tree and File Store</title>     
    <style type="text/css">
      @import "../../dijit/themes/claro/claro.css";
      @import "../../dijit/themes/claro/document.css";
      @import "../../dijit/tests/css/dijitTests.css";
      @import "../themes/claro/claro.css";
    </style>

    <script type="text/javascript">
      var dojoConfig = {
            async: true,
            parseOnLoad: true,
            isDebug: true,
            baseUrl: "../../",
            packages: [
              { name: "dojo",  location: "dojo" },
              { name: "dijit", location: "dijit" },
              { name: "cbtree",location: "cbtree" }
            ]
      };
    </script>

    <script type="text/javascript" src="../../dojo/dojo.js"></script> 
    <script type="text/javascript">
      require([
        "dojo/ready",
        "cbtree/Tree",                  // Checkbox tree
        "cbtree/models/FileStoreModel", // FileStoreModel
        "cbtree/stores/FileStore"
        ], function( ready, Tree, FileStoreModel, FileStore) {
           // Because of the generic nature of this demo it has no knowledge of the file system layout
           // under the DOCUMENT_ROOT, therefore the 'basePath' is set to the document root itself.
          var store = new FileStore( { url: "../stores/server/php/cbtreeFileStore.php", basePath:"."} ); 
          var model = new FileStoreModel( {
                  store: store,
                  rootLabel: 'My HTTP Document Root',
                  checkedRoot: true,
                  checkedStrict: false,
                  queryOptions: {ignoreCase:true},
                  sort: [{attribute:"directory", descending:true},{attribute:"name"}]
               }); 

          ready(function() {
            var tree = new Tree( { model: model, id: "MenuTree" }, "CheckboxTree" );
            tree.startup();
          });
        });
    </script>

  </head>
    
  <body class="claro">
    <h1 class="DemoTitle">Dijit CheckBox Tree with a File Store</h1>
    <p>
      This CheckBox Tree uses the cbtreeFileStore and the assciated PHP server side application to browse the document root 
      of your HTTP server. This example uses lazy loading, that is, the files are only fetched when 
      needed. As a result strict parent-child checkbox relationships are disabled. (see the documentation for details).
    </p>
    <p>
      The HTTP server running this demo MUST have PHP support enabled and provide PHP support for JSON. 
    </p>
    <div id="CheckboxTree">  
    </div>
  </body> 
</html>